<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="tabtop">
          <div v-for="(item, index) in navlist" :key="index" @click="choose(item.id)">
            <div :class="currenindex == index + 1 ? 'active' : 'text'">{{ item.value }}</div>
            <div v-if="currenindex !== index + 1 && currenindex !== index + 2 && index !== 2" class="hr"></div>
          </div>
        </div>
        <div>
          <div class="header_right" @click="showCardNav = !showCardNav">
            <div class="title">搜索</div>
            <div>
              <transition name="from"></transition>
              <span v-show="!showCardNav">
                <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
              </span>
              <transition name="to"></transition>
              <span v-show="showCardNav">
                <i style="margin-right: 5px" class="el-icon-arrow-up"></i>
              </span>
            </div>
          </div>
          <div v-show="showCardNav" class="hr"></div>
          <el-collapse-transition>
            <div v-show="showCardNav" style="padding-top:18px">
              <el-form :inline="true" label-width="110px">
                <!-- 待结算搜索条件 -->
                <el-form-item v-if="currenindex==1">
                  <span slot="label">工程名称</span>
                  <div style="width:300px;height:36px;display:flex;">
                    <div :title="searchText" style="width:216px;padding:0 10px;border-bottom: 1px solid #bbb;margin-right:5px;" class="ellipsis">{{searchText}}</div>
                    <el-button class="bottom_all_two" @click="initsearch(),search=true">选择</el-button>
                  </div>
                </el-form-item>
                <el-form-item v-if="currenindex==1">
                  <span slot="label">结算时间段</span>
                  <el-date-picker v-model="datePicker" style="height:36px" type="datetimerange" unlink-panels align="right" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['12:00:00', '08:00:00']" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
                <!-- 已结算搜索条件 -->
                <el-form-item v-if="currenindex==2">
                  <span slot="label">工程名称</span>
                  <el-input v-model="tableParam.engineeringName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item v-if="currenindex==2">
                  <span slot="label">客户名称</span>
                  <el-input v-model="tableParam.roadwork" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item v-if="currenindex==2">
                  <span slot="label">结算单号</span>
                  <el-input v-model="tableParam.statementNo" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item v-if="currenindex==2">
                  <span slot="label">签收时间</span>
                  <el-date-picker v-model="datePicker" style="height:36px" type="datetimerange" unlink-panels align="right" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['12:00:00', '08:00:00']" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
                <!-- 结算单的搜索条件 -->
                <el-form-item v-if="currenindex==3">
                  <span slot="label">结算单号</span>
                  <el-input v-model="tableParam.statementNo" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item v-if="currenindex==3">
                  <span slot="label">提交时间</span>
                  <el-date-picker v-model="datePicker" style="height:36px" type="datetimerange" unlink-panels align="right" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['12:00:00', '08:00:00']" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button v-if="currenindex == 1" icon="el-icon-search" size="medium" class="bottom_all" @click="(tableParam.page = 1), pagesgettableData()">查 询</el-button>
                  <el-button v-if="currenindex !== 1" icon="el-icon-search" size="medium" class="bottom_all" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
                  <el-button v-if="currenindex !== 1" size="medium" class="bottom_all_two" style="margin-left: 12px" @click="init()">重 置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-collapse-transition>
          <div class="hr"></div>
          <div class="card" :style="currenindex!==1?'padding-top:10px':''">
            <div v-show="currenindex==1" class="card_nav">
              <div>
                <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='SHENGCJSD'))!==-1" size="small" class="bottom_three" :disabled="generate.detailList.length==0" @click="statements">
                  生成结算单
                </el-button>
              </div>
              <div>
              </div>
            </div>
            <div v-loading="tableLoading" class="card_info" :style="style">
              <el-table ref="table" :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="tableData" tooltip-effect="dark" @selection-change="pageshandleSelectionChange">
                <el-table-column v-if="currenindex==1" align="center" type="selection"></el-table-column>
                <template v-for="(item, index2) in table">
                  <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :min-width="item.width" :fixed="item.label =='操作'?'right':false">
                    <template slot-scope="scope">
                      <span v-if="item.label == '状态'">
                        <span v-if="scope.row.enable == 0" style="color: #969799">禁用</span>
                        <span v-if="scope.row.enable == 1" style="color: #00a754">启用</span>
                      </span>
                      <div v-else-if="item.label == '泵类型'">
                        <div v-for="(item,index) in scope.row.detList" :key="index">
                          {{item.pouringWay ||item.pumpType }}
                        </div>
                      </div>
                      <div v-else-if="item.label == '结算单编号'" class="table_link" @click="show( scope.row)">
                        {{ scope.row[item.prop] }}
                      </div>
                      <div v-else-if="item.label == '臂长(米)'">
                        <div v-for="(item,index) in scope.row.detList" :key="index">
                          {{item.height}}
                        </div>
                      </div>

                      <div v-else-if="item.label == '泵单价(元/方)'">
                        <div v-for="(item,index) in scope.row.detList" :key="index">
                          {{item.pumpPrice}}
                        </div>
                      </div>
                      <div v-else-if="item.label == '浇筑量(方)'">
                        <div v-for="(item,index) in scope.row.detList" :key="index">
                          {{item.num}}
                        </div>
                      </div>
                      <div v-else-if="item.label == '泵送费用(元)'">
                        <div v-for="(item,index) in scope.row.detList" :key="index">
                          {{item.pumpCost}}
                        </div>
                      </div>
                      <div v-else-if="item.label == '结算时间段'">
                        {{scope.row.startTime}}至{{scope.row.endTime}}
                      </div>
                      <span v-else-if="item.label == '审核状态'">
                        {{scope.row.auditStatus==1?'待提交':scope.row.auditStatus==2?'审核中':scope.row.auditStatus==3?'通过':'未通过'}}
                      </span>
                      <span v-else-if="item.label == '操作'">
                        <el-button v-if="scope.row.auditStatus==3&&scope.row.supplierConfirm!=2" size="mini" class="bottom_all_two" @click="userSubmit(scope.row)">
                          发送
                        </el-button>
                        <el-button v-if="scope.row.auditStatus==1" size="mini" class="bottom_all_two" @click="$router.push({ name: 'sign_concrete', query: { id: scope.row.statementNo, type: 1 } })">提交审核</el-button>
                      </span>
                      <span v-else-if="item.label == '客户确认'">
                        {{scope.row.supplierConfirm==1?'待查看':scope.row.supplierConfirm==2?'通过':scope.row.supplierConfirm==3?'拒绝':'未发送'}}
                      </span>
                      <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
            <!-- <div class="card_bottom">
              <div class="card_bottom_left">
                <div class="top_page_totle">总共{{ total }}条</div>
                <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="currenindex!==1?gettableData():pagesgettableData()"></el-pagination>
              </div>
              <div>
                <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="currenindex!==1?gettableData():pagesgettableData()">刷新</el-button>
              </div>
            </div> -->
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="currenindex!==1?gettableData():pagesgettableData()"></el-pagination>
        </div>
        <div>
          <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="currenindex!==1?gettableData():pagesgettableData()">刷新</el-button>
        </div>
      </div>
    </el-container>
    <!-- 选择供应商合同 -->
    <el-dialog v-dialogDrag :visible.sync="search" width="680px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">选择工程</span>
      <div class="dialoginfo">
        <div style="position: relative;height:40px;">
          <div style="position: absolute;right: 0;top:0;">
            工程名称：
            <el-input v-model="engineeringName" size="mini" style="width: 130px;"></el-input>
            <el-button size="mini" class="bottom_all but1" style="margin-left: 10px;" @click="initsearch()">搜索</el-button>
          </div>
        </div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="searchData" tooltip-effect="dark" @row-click='setradio'>
          <el-table-column align="center" label="选择">
            <template slot-scope="scope">
              <el-radio :value="searchradio" :label="JSON.stringify(scope.row)">{{''}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column align="center" label="建委合同号" prop="ccContractNo"></el-table-column>
          <el-table-column align="center" label="合同号" prop="contractNo"></el-table-column>
          <el-table-column align="center" label="工程名称" prop="engineeringName"></el-table-column>
          <el-table-column align="center" label="客户名称" prop="roadwork"></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="engineeringName='',search=false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="engineeringName='',submitsearch()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 结算单 -->
    <el-dialog v-dialogDrag :visible.sync="billDeta" width="1180px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">混凝土结算单</span>
      <div ref="html" style="padding:10px 20px">
        <div class="bill_top">
          <span><span class="text">结算工程：</span>{{billDetails.engineeringName}}</span>
          <span><span class="text">客户名称：</span>：{{billDetails.customer}}</span>
          <span><span class="text">结算时间：</span>{{billDetails.startTime}}至{{billDetails.endTime}}</span>
          <span><span class="text">结算单编号：</span>{{billDetails.statementNo}}</span>
        </div>
        <div style="padding:10px 0">
          <span v-if="UserInfo.adminStatus == 1" style="color: #ff0000">公司</span>
          <el-select v-if="UserInfo.adminStatus == 1" ref="selection1" v-model="companyId" style="padding-left:15px;padding-right:40px" @change="setstationIdlist(),$nextTick(()=>{company = $refs.selection1.selectedLabel})">
            <el-option v-for="item in companylist" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <span style="color: #ff0000">站点名称</span>
          <el-select ref="selection2" v-model="stationId" style="padding-left:15px" @change="get_simple_organizationFun(stationId),$nextTick(()=>{stationName = $refs.selection2.selectedLabel})">
            <el-option v-for="item in stationIdlist" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="bill_title">产品结算</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="billDetails.map.beton" tooltip-effect="dark">
          <el-table-column label="产品名称" align="center" prop="itemName"></el-table-column>
          <el-table-column label="签收数量（方）" align="center" prop="adjustSignForNum"></el-table-column>
          <el-table-column label="产品组合" align="center" prop="requirement"></el-table-column>
          <el-table-column label="基本单价（元）" align="center" prop="unitPrice"></el-table-column>
          <el-table-column label="结算单价（方）" align="center" prop="statementUnitPrice">
            <template slot-scope="a">
              <el-input v-model="a.row.statementUnitPrice" style="width:100%" type="Number"></el-input>
            </template>

          </el-table-column>
          <el-table-column label="结算金额（元）" align="center" prop="realPay">
            <template slot-scope="a">
              {{a.row.realPay = Number(a.row.statementUnitPrice) * Number(a.row.adjustSignForNum) }}
            </template>
          </el-table-column>
        </el-table>
        <div class="combined">小计：签收数量【{{combined(billDetails.map.beton,'产品结算')}}】，结算金额【{{combined1(billDetails.map.beton)}}】</div>
        <div class="bill_title">泵送结算</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="billDetails.map.pump" tooltip-effect="dark">
          <el-table-column label="泵类型" align="center" prop="itemName"></el-table-column>
          <el-table-column label="臂长&高度（米）" align="center" prop="height"></el-table-column>
          <el-table-column label="泵送数量（方）" align="center" prop="adjustSignForNum"></el-table-column>
          <el-table-column label="基本单价(元/方)" align="center" prop="unitPrice"></el-table-column>
          <el-table-column label="结算单价（元）" align="center">
            <template slot-scope="a">
              <el-input v-model="a.row.statementUnitPrice" style="width:100%" type="Number"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="结算金额（元）" align="center">
            <template slot-scope="a">
              {{a.row.realPay = Number(a.row.statementUnitPrice) * Number(a.row.adjustSignForNum) }}
            </template>
          </el-table-column>
        </el-table>
        <div class="combined">小计：泵送数量【{{combined(billDetails.map.pump)}}】，结算金额【{{combined1(billDetails.map.pump)}}】</div>
        <div class="bill_title">小方量结算</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="billDetails.map.small" tooltip-effect="dark">
          <el-table-column label="补差方量(方)" align="center" prop="adjustSignForNum"></el-table-column>
          <el-table-column label="基本单价（元/方）" align="center" prop="unitPrice"></el-table-column>
          <el-table-column label="结算单价（元）" align="center">
            <template slot-scope="a">
              <el-input v-model="a.row.statementUnitPrice" style="width:100%" type="Number"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="结算金额（元）" align="center">
            <template slot-scope="a">
              {{a.row.realPay = Number(a.row.statementUnitPrice) * Number(a.row.adjustSignForNum) }}
            </template>
          </el-table-column>
        </el-table>
        <div class="combined">小计：补差方量【{{combined(billDetails.map.small)}}】，结算金额【{{combined1(billDetails.map.small)}}】</div>
        <div class="bill_title">结算合计</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="totalList" tooltip-effect="dark">
          <el-table-column label="费用项" align="center" prop="name"></el-table-column>
          <el-table-column label="结算量（方）" align="center">
            <template slot-scope="a">
              {{combined(billDetails.map[a.row.code])}}
            </template>
          </el-table-column>
          <el-table-column label="结算金额（元）" align="center">
            <template slot-scope="a">
              {{combined1(billDetails.map[a.row.code])}}
            </template>
          </el-table-column>
        </el-table>
        <div class="combined">小计：{{combined3(totalList)}}</div>
      </div>
      <span slot="footer" class="dialog-footer" style="display:flex;justify-content: space-between;">
        <div>
          <el-button class="bottom_all_two" @click="combinedSubmit(2)">提交审核</el-button>
        </div>
        <div>
          <el-button class="bottom_all_two" @click="billDeta=false">取 消</el-button>
          <el-button class="bottom_all" style="margin-left: 24px" @click="combinedSubmit(0)">保 存</el-button>
        </div>

      </span>
    </el-dialog>
    <!-- 查看结算单 -->
    <el-dialog v-dialogDrag :visible.sync="billDeta1" width="1180px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">混凝土结算单</span>
      <div>
        <div class="bill_top">
          <span><span class="text">结算工程：</span>{{billDetails1.engineeringName}}</span>
          <span><span class="text">客户名称：</span>{{billDetails1.customer}}</span>
          <span><span class="text">公司：</span>{{billDetails1.company}}</span>
          <span><span class="text">站点名称：</span>{{billDetails1.stationName}}</span>
          <span><span class="text">结算时间：</span>{{billDetails1.startTime}}至{{billDetails1.endTime}}</span>
          <span><span class="text">结算单编号：</span>{{billDetails1.statementNo}}</span>
        </div>
        <div class="bill_title">产品结算</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="billDetails1.map.beton" tooltip-effect="dark">
          <el-table-column label="产品名称" align="center" prop="itemName"></el-table-column>
          <el-table-column label="签收数量（方）" align="center" prop="adjustSignForNum"></el-table-column>
          <el-table-column label="产品组合" align="center" prop="requirement"></el-table-column>
          <el-table-column label="基本单价（元）" align="center" prop="unitPrice"></el-table-column>
          <el-table-column label="结算单价（方）" align="center" prop="statementUnitPrice">
          </el-table-column>
          <el-table-column label="结算金额（元）" align="center" prop="realPay">
          </el-table-column>
        </el-table>
        <div class="combined">小计：签收数量【{{combined(billDetails1.map.beton)}}】，结算金额【{{combined1(billDetails1.map.beton)}}】</div>
        <div class="bill_title">泵送结算</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="billDetails1.map.pump" tooltip-effect="dark">
          <el-table-column label="泵类型" align="center" prop="itemName"></el-table-column>
          <el-table-column label="臂长&高度（米）" align="center" prop="height"></el-table-column>
          <el-table-column label="泵送数量（方）" align="center" prop="adjustSignForNum"></el-table-column>
          <el-table-column label="基本单价(元/方)" align="center" prop="unitPrice"></el-table-column>
          <el-table-column label="结算单价（元）" align="center" prop="statementUnitPrice">
          </el-table-column>
          <el-table-column label="结算金额（元）" align="center" prop="realPay">
          </el-table-column>
        </el-table>
        <div class="combined">小计：泵送数量【{{combined(billDetails1.map.pump)}}】，结算金额【{{combined1(billDetails1.map.pump)}}】</div>
        <div class="bill_title">小方量结算</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="billDetails1.map.small" tooltip-effect="dark">
          <el-table-column label="补差方量(方)" align="center" prop="adjustSignForNum"></el-table-column>
          <el-table-column label="基本单价（元/方）" align="center" prop="unitPrice"></el-table-column>
          <el-table-column label="结算单价（元）" align="center" prop="statementUnitPrice">
          </el-table-column>
          <el-table-column label="结算金额（元）" align="center" prop="realPay">
          </el-table-column>
        </el-table>
        <div class="combined">小计：补差方量【{{combined(billDetails1.map.small)}}】，结算金额【{{combined1(billDetails1.map.small)}}】</div>
        <div class="bill_title">结算合计</div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="totalList1" tooltip-effect="dark">
          <el-table-column label="费用项" align="center" prop="name"></el-table-column>
          <el-table-column label="结算量（方）" align="center">
            <template slot-scope="a">
              {{combined(billDetails1.map[a.row.code])}}
            </template>
          </el-table-column>
          <el-table-column label="结算金额（元）" align="center">
            <template slot-scope="a">
              {{combined1(billDetails1.map[a.row.code])}}
            </template>
          </el-table-column>
        </el-table>
        <div class="combined">小计：{{combined4(totalList1)}}</div>
      </div>
      <span slot="footer" class="dialog-footer" style="display:flex;justify-content: space-between;">
        <div>
          <el-button class="bottom_all_two" @click="downloadLink">打印结算单</el-button>
          <el-button v-if="billDetails1.auditStatus==1" class="bottom_all_two" @click="combinedSubmit(3)">提交审核</el-button>
        </div>
        <div>
          <el-button class="bottom_all_two" @click="billDeta1=false">取 消</el-button>
        </div>
      </span>
    </el-dialog>
    <!--选择发送的人员-->
    <!-- <el-dialog v-dialogDrag :visible.sync="userDeta" width="620px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">请选择接收账号</span>
      <div style="padding:0 10px">
        <el-checkbox-group v-model="userarr">
          <template v-for="(item,index) in useroptons">
            <el-checkbox :key="index" style="line-height:26px" :label="item.id">{{item.name}}</el-checkbox>
          </template>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="userDeta=false">取 消</el-button>
        <el-button class="bottom_all" :disabled="userarr.length==0" style="margin-left: 24px" @click="userSubmit()">发 送</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import {
  queryPage1, queryPage2, queryPage3, get_engineering_list, generate_statement_detail,
  save_or_update_statementde_tail,
  get_statement_detail,
  // get_users,
  update_status,
  Download
} from "@/api/wise/concrete.js";
import { getUserInfo } from "@/utils/auth.js";
import { getcompany, getUserAutList, get_simple_organization } from "@/api/common.js";
import { get_station_list } from "@/api/smart/stocksake.js";
import {
  informClient
} from "@/api/wise/Wise_contactsbusiness/Wise_contactsbusiness.js";
import html2canvas from 'html2canvas';
export default {
  mixins: [mixin],
  data() {
    return {
      companyId: '',
      company: '',
      companylist: [],
      stationId: '',
      stationName: '',
      stationIdlist: [],
      /*表格数据*/
      queryPage: '',
      download: Download,
      table: [],
      table1: [
        { label: "工程名称", width: "auto", prop: "engineeringName", status: true },
        { label: "客户名称", width: "120", prop: "roadwork", status: true },
        { label: "站点", width: "120", prop: "productionSite", status: true },
        { label: "订单号", width: "auto", prop: "orderNo", status: true },
        { label: "运输号", width: "120", prop: "transportNo", status: true },
        { label: "车牌号", width: "auto", prop: "carNo", status: true },
        { label: "产品名称", width: "120", prop: "productName", status: true },
        { label: "票单名称", width: "auto", prop: "noteName", status: true },
        { label: "票面量(方)", width: "120", prop: "faceValue", status: true },
        { label: "客户签收时间", width: "120", prop: "affirmTime", status: true },
        { label: "签收量(方)", width: "120", prop: "adjustSignForNum", status: true },
        { label: "单价(元/方)", width: "120", prop: "unitPrice", status: true },
        { label: "混凝土费用(元)", width: "120", prop: "betonCost", status: true },
        { label: "小方量补差（方）", width: "120", prop: "smallQuantitiesDelta", status: true },
        { label: "单价（元/方）", width: "120", prop: "smallQuantitiesPrice", status: true },
        { label: "小方量运费（元）", width: "120", prop: "smallQuantitiesCost", status: true },
        { label: "泵类型", width: "120", prop: "", status: true },
        { label: "臂长(米)", width: "120", prop: "", status: true },
        { label: "泵单价(元/方)", width: "120", prop: "", status: true },
        { label: "浇筑量(方)", width: "120", prop: "", status: true },
        { label: "泵送费用(元)", width: "120", prop: "", status: true },
        { label: "结算金额(元)", width: "120", prop: "settlementAmount", status: true },

      ],
      table2: [
        { label: "结算单编号", width: "320", prop: "statementNo", status: true },
        { label: "工程名称", width: "140", prop: "engineeringName", status: true },
        { label: "客户名称", width: "140", prop: "customer", status: true },
        { label: "结算时间段", width: "310", prop: "", status: true },
        { label: "结算金额", width: "140", prop: "statementAmount", status: true },
        { label: "提交时间", width: "160", prop: "submitTime", status: true },
        { label: "审核状态", width: "140", prop: "", status: true },
        { label: "操作", width: "120", prop: "", status: true },
        { label: "客户确认", width: "120", prop: "", status: true },
      ],
      pagesType: 0,
      /**导航栏*/
      navlist: [
        {
          value: "待结算",
          id: 1,
        },
        {
          value: "已结算",
          id: 2,
        },
        {
          value: "结算单",
          id: 3,
        },
      ],
      currenindex: 1,
      search: false,
      searchradio: '',
      searchText: '',
      datePicker: [],
      billDetails: {
        map: {
          beton: [],
          pump: [],
          small: []
        }
      },
      totalList: [
        { name: '混凝土', code: 'beton' },
        { name: '泵送', code: 'pump' },
        { name: '小方量运输', code: 'small' }
      ],
      generate: {
        detailList: []
      },
      billDeta: false,
      searchData: [],
      low: {},
      billDeta1: false,
      billDetails1: {
        map: {
          beton: [],
          pump: [],
          small: []
        }
      },
      totalList1: [
        { name: '混凝土', code: 'beton' },
        { name: '泵送', code: 'pump' },
        { name: '小方量运输', code: 'small' }
      ],
      UserInfo: '',
      userDeta: false,
      useroptons: [],
      userarr: [],
      engineeringName: ''
    };
  },
  async created() {
    /*存储拷贝的原初始化fromDate数据*/
    this.tableParam = { ...this.tableParam, engineeringId: '', startTime: '', endTime: '' };
    this.UserInfo = getUserInfo();
    if (this.UserInfo.adminStatus == 1) {
      /**通过typeId为公司类型id查询所有公司 */
      getcompany({ typeId: "19da56b9e85648059e3cf1e7da497da4" }).then((res) => {
        this.companylist = res.data;
      });
    } else {
      this.stationIdlist = await getUserAutList(true)
    }
  },
  watch: {
    datePicker() {
      if (this.datePicker) {
        this.tableParam.startTime = this.datePicker[0]
        this.tableParam.endTime = this.datePicker[1]
      } else {
        this.tableParam.startTime = ''
        this.tableParam.endTime = ''
      }
    },
    currenindex: {
      handler() {
        this.tableData = []
        this.datePicker = []
        this.tableParam = this.$options.data().tableParam
        if (this.currenindex == 1) {
          this.searchText = ''
          this.table = this.table1;
          this.queryPage = queryPage1
        }
        if (this.currenindex == 2) {
          this.table = this.table1;
          this.queryPage = queryPage2
          this.gettableData()
        }
        if (this.currenindex == 3) {
          this.table = this.table2;
          this.queryPage = queryPage3
          this.gettableData()
        }
      },
      deep: false,
      immediate: true,
    },
    tableData() {
      if (this.tableData.length !== 0 && this.currenindex == 1) {
        this.$refs.table.toggleAllSelection()
        let text = JSON.parse(this.searchradio)
        this.generate.startTime = this.tableParam.startTime
        this.generate.endTime = this.tableParam.endTime
        this.generate.engineeringId = text.engineeringId
        this.generate.engineeringName = text.engineeringName
        this.generate.customer = text.roadwork
        this.generate.contractId = text.engineeringId
      }
    },
  },
  methods: {
    downloadLink() {
      this.$Download(this.download, { statementNo: this.low.statementNo })
    },
    /**通过站点查询公司 */
    get_simple_organizationFun(id) {
      get_simple_organization({ id: id }).then((res) => {
        this.companyId = res.data.id
        this.company = res.data.name
      });//查询站点所属公司
    },
    /*根据公司获取站点*/
    setstationIdlist() {
      get_station_list({ parentId: this.fromDate.companyId }).then((res) => {
        this.stationIdlist = res.data;
      });
    },
    /**小计量*/
    combined(arr, nameType) {
      let num = 0
      if (this.billDeta1 || this.billDeta) {
        arr.forEach(res => {
          if (nameType == '产品结算') {
            if (res.type == 1) {
              num = Number(res.adjustSignForNum) + num
            }
          } else {
            num = Number(res.adjustSignForNum) + num
          }
        })
      }
      return num.toFixed(2)
    },
    /**小计金额*/
    combined1(arr) {
      let num = 0
      if (this.billDeta1 || this.billDeta) {
        arr.forEach(res => {
          num = Number(res.realPay) + num
        })
      }
      return num
    },
    /**结算总计算
     * @param {Array} arr 为显示的数据，并提供billDetails数据里的keyand b.
    */
    combined3(arr) {
      let num = 0
      if (this.billDeta1 || this.billDeta) {
        arr.forEach(res => {
          num = this.combined1(this.billDetails.map[res.code]) + num
        })
      }
      return num
    },
    combined4(arr) {
      let num = 0
      if (this.billDeta1 || this.billDeta) {
        arr.forEach(res => {
          num = this.combined1(this.billDetails1.map[res.code]) + num
        })
      }
      return num
    },
    /**
     * 保存结算单
     * @param {number} num 标识保存或提佳品审批 
     */
    async  combinedSubmit(num) {
      if (num == 3) {
        this.$router.push({ name: "sign_concrete", query: { id: this.low.statementNo, type: 1 } })
        return
      }
      let _this = this
      if (_this.companyId == '' && _this.UserInfo.adminStatus == 1) {
        _this.$message({
          message: '请选择公司',
          type: 'warning'
        });
        return
      }
      if (_this.stationId == '') {
        _this.$message({
          message: '请选择站点',
          type: 'warning'
        });
        return
      }
      let data = new Object()
      await html2canvas(this.$refs.html).then((res) => {
        let url = res.toDataURL('image/png');
        console.log(url)
        data.picture = url
      })
      console.log(this.radio)
      data.company = _this.company
      data.companyId = _this.companyId
      data.stationId = _this.stationId
      data.stationName = _this.stationName
      data.startTime = this.billDetails.startTime
      data.endTime = this.billDetails.endTime
      data.engineeringId = this.billDetails.engineeringId
      data.engineeringName = this.billDetails.engineeringName
      data.customer = this.billDetails.customer
      data.statementNo = this.billDetails.statementNo
      data.submitTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
      data.statementAmount = this.combined3(this.totalList)
      data.engineeringId = this.billDetails.engineeringId
      data.auditStatus = 3
      data.list = [...this.billDetails.map.beton, ...this.billDetails.map.pump, ...this.billDetails.map.small]
      data.detailList = this.generate.detailList
      data.operation = 0
      save_or_update_statementde_tail(data).then(res => {
        if (res.code == 1001) {
          if (num == 2) {
            this.$router.push({ name: "sign_concrete", query: { id: res.data, type: 1 } });
            return
          }
          this.billDeta = false
          this.gettableData()
        }
      })
    },
    /*导航栏切换*/
    choose(num) {
      this.currenindex = num;
    },
    /**搜索条件单选选中*/
    setradio(data) {
      this.searchradio = JSON.stringify(data)
    },
    /**工程选择*/
    submitsearch() {
      let text = JSON.parse(this.searchradio)
      this.tableParam.companyId = text.companyId
      this.tableParam.engineeringId = text.engineeringId
      this.searchText = (text.contractNo != null ? text.contractNo + '-' : '') + (text.roadwork != null ? text.roadwork + '-' : '') + text.engineeringName
      this.search = false
    },
    /**搜索条件*/
    initsearch() {
      get_engineering_list({ engineeringName: this.engineeringName }).then(res => {
        this.searchData = res.data
      })
    },
    /*重置数据*/
    init() {
      this.tableParam = this.$options.data().tableParam
      this.gettableData();
    },
    /**表格选中*/
    pageshandleSelectionChange(val) {
      this.generate.detailList = val
    },
    /**判断工程时间必传*/
    async pagesgettableData() {
      if (this.tableParam.engineeringId && this.datePicker && this.datePicker.length !== 0) {
        await this.gettableData()
        console.log(this.tableData);
        if (this.tableData.length > 0) {
          let row = this.tableData[0]
          let div = `<table>异常物流数量：` + row.err.errorNum + `</table>`
          console.log(row.err.reason);
          row.err.reason.forEach((v) => {
            div += `<div style="word-break: break-all;word-wrap: break-word;font-weight: 100;">` + v + `</div>`
          })
          this.$notify({
            title: '工程：' + row.engineeringName,
            dangerouslyUseHTMLString: true,
            message: '<strong>' + div + '</strong>',
            position: 'bottom-right',
            duration: 0
          });
        }
        return
      }
      this.$message({
        message: '警告哦，请先选择供应商和时间段后查询',
        type: 'warning'
      });
    },
    /**生成结算单*/
    statements() {
      let _this = this
      console.log(_this.generate)
      generate_statement_detail(_this.generate).then((res) => {
        _this.billDetails = res.data
        _this.billDeta = true
      })
    },
    show(low) {
      this.low = low
      get_statement_detail({ statementNo: low.statementNo }).then(res => {
        if (res.code == 1001) {
          this.billDetails1 = res.data
          this.billDeta1 = true
        }
      })
    },
    /**结算单发给供应商*/
    // send(low) {
    //   this.low = low
    //   this.userarr = []
    //   this.useroptons = []
    //   get_users({ engineeringId: low.engineeringId }).then(res => {
    //     console.log(res.data)
    //     if (res.data.length == 0) {
    //       this.$message({
    //         message: '暂无相关人员',
    //         type: 'warning'
    //       });
    //       return
    //     }
    //     this.useroptons = res.data.map(res => ({ id: res.userId, name: res.userName }))
    //     this.userDeta = true
    //   })
    // },
    async userSubmit(low) {
      this.$confirm('确认发送?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'bottom_all_two',
        confirmButtonClass: 'bottom_all',
        type: 'warning'
      }).then(async () => {
        let json = {
          type: 3,
          settlementId: low.id,
          settlementNo: low.statementNo,
          times: low.startTime + '-' + low.endTime,
          money: low.statementAmount,
          applyForTime: low.submitTime,
          imgUrl: low.picture,
          contractId: low.engineeringId
        }
        // let arr = this.userarr.map(res => (new useritem(res)))
        await informClient(json).then(res => {
          if (res.code == 1001) {
            update_status({ statementNo: low.statementNo, statusType: 2, supplierConfirm: 1 }).then(() => { })
            this.$message({
              message: '发送成功',
              type: 'success'
            });
            this.gettableData()
            this.userDeta = false
          }
        })
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.dialoginfo {
  padding: 20px 20px 0 20px;
  max-height: 400px;
  overflow: auto;
}
.tabtop {
  width: 571px;
}
.el-input,
.el-select {
  width: 240px;
}
/*
 <el-link class="table_link" :underline="false">查看配合比</el-link>*/
.table_link {
  margin: 0 10px;
  color: $bg_color;
  cursor: pointer;
}

.table_link:hover {
  opacity: 0.8;
}
.bill_top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  line-height: 40px;
  .text {
    font-weight: 600;
    color: #000;
  }
}
.bill_title {
  font-size: 18px;
  font-weight: 600;
  padding: 15px 0;
}
.bill_subtitle {
  padding: 20px 0;
  > span {
    padding-right: 20px;
  }
  .text {
    color: #000;
  }
}
.combined {
  border: 1px solid #ebeef5;
  text-align: center;
  line-height: 40px;
}
</style>
